<template>
  <div v-if="_d.visible" class="m-page-loading">
  	<Spin :tip="_d.loadText"/>
  </div>
</template>

<script setup>
	import { reactive, ref, onMounted, onUnmounted, useAttrs } from 'vue'
	import {Spin} from "ant-design-vue";

	const attrs = useAttrs();
	const _d = reactive({
		visible: false,
		loadText: ''
	})

	onMounted(() => {
		_d.loadText = attrs.text;
		show();
	})

	onUnmounted(() => {
		hide();
	})

	function show() {
		_d.visible = true;
	}

	function hide() {
		_d.visible = false;
	}

	function setText(text) {
		_d.loadText = text;
	}

	defineExpose({
		show,
		hide,
		setText,
	})
</script>

<style lang="less" scoped>
.m-page-loading {
	position: fixed;
	z-index: 9999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.05);
	backdrop-filter: blur(3px);
	display: flex;
	justify-content: center;
	align-items: center;
	animation: showLoading .3s;
}
@keyframes showLoading {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
</style>